<!DOCTYPE html>
<html>

<head>
  <title>图片上传与展示</title>
</head>

<body>
  <h2>上传图片</h2>
  <input type="file" id="imageInput">
  <button onclick="uploadImage()">上传图片</button>

  <h2>展示图片</h2>
  <div id="imageContainer"></div>

  <script>
    function uploadImage() {
      var fileInput = document.getElementById('imageInput');
      var file = fileInput.files[0];

      var formData = new FormData();
      formData.append('file', file);

      fetch('http://localhost:8080/class/upload', {
        method: 'POST',
        body: formData
      })
        .then(response => response.text())
        .then(result => {
          if (result === '上传成功') {
            showImage(file.name);
          } else {
            console.log('上传失败');
          }
        })
        .catch(error => console.error('Error:', error));
    }

    function showImage(fileName) {
      var imageContainer = document.getElementById('imageContainer');
      var imgElement = document.createElement('img');
      imgElement.src = 'resources/images/' + fileName;
      imageContainer.appendChild(imgElement);
    }
  </script>
</body>

</html>